<template>
  <div class="slist-container">
    <!-- 歌单样式 -->
    <div class="info-box">
      <div class="song-img">
        <div class="img-bg"></div>
        <div class="poster">
          <div class="el-image">
            <img :src="trackIdlist.coverImgUrl" />
          </div>
        </div>
      </div>
      <div class="info">
        <div class="info-main">
          <h1 class="titel">{{ trackIdlist.name }}</h1>
          <div class="tag">
            <span v-for="tag in trackIdlist.tags" :key="tag">#{{ tag }}</span>
          </div>
        </div>
        <div class="btns">
          <el-button type="danger" icon="el-icon-video-play" round
            >播放全部</el-button
          >
          <el-button class="btn-2" icon="el-icon-star-off" round
            >收藏</el-button
          >
          <el-button class="btn-3" icon="el-icon-edit-outline" round
            >分享</el-button
          >
        </div>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div class="songlist-group">
      <div class="title">全部歌曲</div>
      <div class="songlist">
        <el-table :data="trackIdlist.tracks" stripe style="width: 100%">
          <el-table-column type="index" prop="index" label="序号" width="60" cell-mouse-enter>
          </el-table-column>
          <el-table-column label="歌曲" width="320">
            <template slot-scope="scope">
              <span @click="goPlay(scope)" style="cursor:pointer">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ar[0].name"
            label="歌手"
            width="280"
          ></el-table-column>
          <el-table-column prop="al.name" label="专辑" width="390">
            <template slot-scope="scope">
              <span @click="getAlbum(scope)">{{scope.row.al.name}}</span>
            </template>
          </el-table-column>
          <template :data="songTimeArr">
            <el-table-column
              type="index"
              :index="songtime"
              label="时长"
              width="150"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Slist',
  data() {
    return {
      songId: '' //歌曲id
    }
  },
  // 计算属性
  computed: {
    ...mapState({
      trackIdlist: state => state.songlist.trackIdlist,
      songTimeArr: state => state.songlist.songTimeArr
    })
  },
  methods: {
    getAlbum(scope){
      const {id}=scope.row.al
      this.$store.dispatch('songlist/getAlbumList', id)
      this.$router.push({ path: '/album',query: {  id } })
        // console.log(scope)
    },
    songtime(index) {
      return this.songTimeArr[index]
    },
    goPlay(scope){
      const id = scope.row.id
      const name = scope.row.name+'-'+scope.row.ar[0].name
      const img = scope.row.al.picUrl
       if (id) {
       this.$bus.$emit('play', {id,name,img})
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
// 通用样式
* {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 400;
  box-sizing: border-box;
}
.slist-container {
  width: 1200px;
  margin: 0 auto;
  // 歌单特点
  .info-box {
    margin-top: 30px;
    display: flex;
    // 图片区域
    .song-img {
      width: 276px;
      height: 260px;
      position: relative;
      margin-right: 60px;
      .img-bg {
        width: 100%;
        height: 230px;
        position: absolute;
        right: 0;
        top: 21px;
        background: hsl(0, 45%, 94%);
      }
      .poster {
        width: 260px;
        height: 100%;
        position: relative;
        .el-image {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    // 特点区域
    .info {
      overflow: hidden;
      .info-main {
        height: 218px;
        h1 {
          font-size: 30px;
          font-weight: 600;
        }
        .tag {
          margin-top: 40px;
          span {
            font-size: 14px;
            margin-right: 10px;
            color: #e61723;
          }
        }
      }
    }
  }
  // 歌曲列表
  .songlist-group {
    margin-top: 50px;
    .title {
      font-size: 28px;
      margin-bottom: 30px;
    }
  }
}
</style>
